<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<title>加星文件</title>
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
		<style>
			.note-list,
			.folder-list {
				padding: 10px 0 10px;
				border-bottom: dashed 1px #CACACD;
				flex-flow: column;
			}
			
			.title-weight {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 10px;
			}
			/*文件夹图标*/
			
			@font-face {
				font-family: 'iconfont';
				/* project id 1571015 */
				src: url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.eot');
				src: url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.woff2') format('woff2'), url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.woff') format('woff'), url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.ttf') format('truetype'), url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.svg#iconfont') format('svg');
			}
			
			.iconfont {
				font-family: "iconfont" !important;
				font-size: 16px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
			
			.title {
				margin: 5px 0px 0px 0px;
				color: #6d6d72;
				font-size: 12px;
			}
			
			.star {
				float: right;
				margin-right: 20px;
				width: 20px;
			}
			
			.summary {
				height: 30px;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
			}
			#note {
				display: none;
				position: absolute;
				top: 200px;
				left: 7%;
				width: 337px;
				height: 113px;
				padding: 10px;
				border: 1px solid #ccc;
				background-color: white;
				z-index: 1002;
				border-radius: 2%;
				font-size: 16px;
			}
			.black_overlay {
				display: none;
				position: absolute;
				top: -10%;
				left: -10%;
				width: 440px;
				height: 873px;
				background-color: black;
				z-index: 1001;
				-moz-opacity: 0.8;
				opacity: .80;
				filter: alpha(opacity=80);
			}
			.li_list {
				margin-bottom: 15px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left" id="back_folder" onClick="javascript :history.back(-1);" style="color: #000;"></a>
			<h1 class="mui-title">加星文件</h1>
			<a class="mui-icon mui-icon-more-filled" href="#popover2" style="color: #000;float: right;" id="menu_folder"></a>
		</header>
		<div class="mui-input-row mui-search">
			<input type="search" class="mui-input-clear" placeholder="搜索" id="inquire">
		</div>
		<!--显示最新的笔记-->
		<div id="newest_note">
		</div>
		<!--文件夹右上角菜单-->
		<div id="popover2" class="mui-popover">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" id="batch-click">同步
				</li>
				<li class="mui-table-view-cell checkes">显示摘要&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<svg t="1576747105360" style="display: none;" class="icon right" viewBox="0 0 1433 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2857" width="16" height="16">
						<path d="M42.530133 606.8224C16.315733 579.584 13.380267 532.753067 35.498667 502.647467L33.5872 505.173333a66.696533 66.696533 0 0 1 94.549333-13.5168l226.645334 173.6704c59.869867 45.8752 154.965333 44.373333 213.128533-4.096L1323.690667 31.402667a76.5952 76.5952 0 0 1 101.034666 4.5056L1406.429867 17.749333a67.037867 67.037867 0 0 1 0.136533 95.8464l-846.506667 833.1264a134.621867 134.621867 0 0 1-191.624533-2.730666L42.530133 606.890667z" p-id="2858" fill="#1296db"></path>
					</svg>
				</li>
				<li class="mui-table-view-cell check-radio">按修改时间 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<svg t="1576747105360" style="display: none;" class="icon right" viewBox="0 0 1433 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2857" width="16" height="16">
						<path d="M42.530133 606.8224C16.315733 579.584 13.380267 532.753067 35.498667 502.647467L33.5872 505.173333a66.696533 66.696533 0 0 1 94.549333-13.5168l226.645334 173.6704c59.869867 45.8752 154.965333 44.373333 213.128533-4.096L1323.690667 31.402667a76.5952 76.5952 0 0 1 101.034666 4.5056L1406.429867 17.749333a67.037867 67.037867 0 0 1 0.136533 95.8464l-846.506667 833.1264a134.621867 134.621867 0 0 1-191.624533-2.730666L42.530133 606.890667z" p-id="2858" fill="#1296db"></path>
					</svg>
				</li>
				<li class="mui-table-view-cell check-radio">按创建时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<svg t="1576747105360" style="display: none;" class="icon right" viewBox="0 0 1433 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2857" width="16" height="16">
						<path d="M42.530133 606.8224C16.315733 579.584 13.380267 532.753067 35.498667 502.647467L33.5872 505.173333a66.696533 66.696533 0 0 1 94.549333-13.5168l226.645334 173.6704c59.869867 45.8752 154.965333 44.373333 213.128533-4.096L1323.690667 31.402667a76.5952 76.5952 0 0 1 101.034666 4.5056L1406.429867 17.749333a67.037867 67.037867 0 0 1 0.136533 95.8464l-846.506667 833.1264a134.621867 134.621867 0 0 1-191.624533-2.730666L42.530133 606.890667z" p-id="2858" fill="#1296db"></path>
					</svg>
				</li>
				<li class="mui-table-view-cell check-radio">按名称排序&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<svg t="1576747105360" class="icon right" viewBox="0 0 1433 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2857" width="16" height="16">
						<path d="M42.530133 606.8224C16.315733 579.584 13.380267 532.753067 35.498667 502.647467L33.5872 505.173333a66.696533 66.696533 0 0 1 94.549333-13.5168l226.645334 173.6704c59.869867 45.8752 154.965333 44.373333 213.128533-4.096L1323.690667 31.402667a76.5952 76.5952 0 0 1 101.034666 4.5056L1406.429867 17.749333a67.037867 67.037867 0 0 1 0.136533 95.8464l-846.506667 833.1264a134.621867 134.621867 0 0 1-191.624533-2.730666L42.530133 606.890667z" p-id="2858" fill="#1296db"></path>
					</svg>
				</li>
			</ul>
		</div>
		<div id="note">
			<ul>
				<li class="li_list"><i class="fa fa-share-alt" aria-hidden="true"></i>
					<a href="#" style="margin-left: 20px;">分享<i class="fixed-id" style="display: none;"></i></a>
				</li>
				<li class="li_list"><i class="fa fa-folder-o" aria-hidden="true"></i>
					<a href="folder_page_move.html" style="margin-left: 20px;">移动<i class="fixed-id" style="display: none;"></i></a>
				</li>
				<li class="li_list" id="delete" onclick=""><i class="fa fa-trash-o" id="popup-li" aria-hidden="true" ></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除<i class="fixed-id" style="display: none;"></i></li>
			</ul>
		</div>
		<div class="black_overlay" id="fade"></div>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<script src="js/mui.min.js"></script>
		<script>
			mui.init
			/*$("#back_folder").click(function(){
				console.log("aaa")
				mui.openWindow('tabbar.html')
				$("#tabbar-with-map").load("personal.html")
			})*/

			/*			var userid=sessionStorage.getItem("accessToken");
			 */
			var userid;
			var myUrl1;
			
			mui.plusReady(function() {
				userid = plus.storage.getItem('accessToken');
            	myUrl1=plus.storage.getItem("myUrl1");
				//查询所有的加星文件
				$.ajax({
					type: "get",
					url: ""+myUrl1+"/note-star/notes/findAllStar",
					data: {
						token: userid
					},
					contentType: 'application/json',
					dataType: 'json',
					success: function(d) {
						for(var i = 0; i < d.length; i++) {
							$('#newest_note').append('<div class="note-list"><span class="down" style="display: none;">'+d[i].id+'</span><span class="title-weight">' + d[i].notesName + '<img src="img/star.png" class="star"/></span><div class="summary"><p class="title">' + d[i].content + '</p></div><p class="title">' + d[i].updateTime + '</p><input type="hidden" class="favorite" value="' + d[i].favorite + '"/></div>')
						}
					}
				});
			})
			
			//点击排序方式
				$(".check-radio").click(function() {
					//隐藏弹出框
					mui("#popover2").popover('toggle');
					$(".right").hide();
					$(this).find("svg").show();
					$.ajax({
						type:'get',
						url:""+myUrl1+"/note-star/sort/sortNotes",
						dataType:'json',
						data: {
							token:userid,
							type: $(this).index()
						},
						success: function(d) {
							$('#newest_note').html("");
							for(var i = 0; i < d.length; i++) {
								$('#newest_note').append('<div class="note-list"><span class="down" style="display: none;">'+d[i].id+'</span><span class="title-weight">' + d[i].notesName + '<img src="img/star.png" class="star"/></span><div class="summary"><p class="title">' + d[i].content + '</p></div><p class="title">' + d[i].createTime + '</p><input type="hidden" class="favorite" value="' + d[i].favorite + '"/></div>')
							}
						},
						error:function(xhr,type,errorThrown){
							alert(type)
						}
					})
				})
			//执行刷新刷新页面
			window.addEventListener('refresh', function(e) {
				location.reload();
			});
			//批量选择
			$("#batch-click").click(function() {
				//隐藏弹出框
				mui("#popover2").popover('toggle');
				//显示复选框
				$(".inp-check").show();
				$(".inp-label").css("padding-left", "58px");
				//取消点击跳转事件
				$(".folder-list").attr("onclick", "");
				$(".note-list").attr("onclick", "");
			})
			var flash = true;
			$('.checkes').click(function() {
				if(flash) {
					alert(flash)
					$(this).find("svg").show();
					//隐藏弹出框
					mui("#popover2").popover('toggle');
					flash = false;
				} else {
					$(this).find("svg").hide();
					mui("#popover2").popover('toggle');
					flash = true;
				}
			})

			//搜索
			$("#inquire").click(function() {
				mui.openWindow({
					url: 'star_search.html',
					//传递的参数
				})
			})
			//跳转到查看页面的方法
			function turnPage(d) {
				mui.openWindow({
					url: 'show_note.html',
					//传递的参数
					extras: {
						ids: d,
					}
				})
			}
			//关闭笔记弹出层
			$('#fade').click(function() {
				$("#fade").hide();
				$('#note').hide();
			})
			//弹出框
			$(function() {
				var timeOutEvent = 0;
				var startTime = "";
				var endTime = "";
				//长按笔记
				//手指触摸屏幕时触发事件
				$('body').on('touchstart', '.note-list', function() {
					startTime = new Date();
					var d=$(this).find('.down').html();
					//删除笔记
					$('#delete').click(function(){
						$.ajax({
							type:'get',
							url:""+myUrl1+"/note-star/notes/deleteNotes",
							dataType:'text',
							data: {
								token:userid,
								id: d
							},
							success: function(d) {
								$("#fade").hide();
								$('#note').hide();
								document.location.reload();
							},
							error: function(xhr,type,errorThrown){
								console.log(type)
							}
						})
					})
					timeOutEvent = setTimeout(function() {
						timeOutEvent = 0;
						$('#note').find('.fixed-id').innerHTML = d;
						$("#fade").show();
						$('#note').show();
					}, 700);
				});
				//手指在屏幕上移动时触发
				$('body').on('touchmove', '.note-list', function(e) {
					clearTimeout(timeOutEvent);
					timeOutEvent = 0;
				});
				//手指离开屏幕时触发
				$('body').on('touchend', '.note-list', function(data) {
					endTime = new Date();
					clearTimeout(timeOutEvent);
					if(endTime - startTime < 700) {
						var d=$(this).find('.down').html();
						turnPage(d);
					}
				});
			})

		</script>
	</body>

</html>